<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style>
  html, body {
    padding: 0;
    margin: 0;
  }

  .playWnd {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  }

</style>

<body>
<div id="playWnd" class="playWnd"></div>
</body>

<!--三个必要的js文件引入-->
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
<script src="jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->

<script type="text/javascript">

  //页面加载时创建播放实例初始化
  let container
  let containerHeight
  let containerWidth

  $(window).load(function() {
    container = $('#playWnd')
    containerHeight = container.height()
    containerWidth = container.width()
    registerEvent()
    // initPlugin()
  })

  //声明公用变量
  var initCount = 0
  var pubKey = ''

  // 创建播放实例
  function initPlugin(appkey, appsecret, ip, param, top, left, isHide) {
    oWebControl = new WebControl({
      szPluginContainer: 'playWnd',                      // 指定容器id
      iServicePortStart: 15900,                                  // 指定起止端口号，建议使用该值
      iServicePortEnd: 15909,
      szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',         // 用于IE10使用ActiveX的clsid
      cbConnectSuccess: function() {                             // 创建WebControl实例成功
        oWebControl.JS_StartService('window', {                 // WebControl实例创建成功后需要启动服务
          dllPath: './VideoPluginConnect.dll'                     // 值"./VideoPluginConnect.dll"写死
        }).then(function() {                                     // 启动插件服务成功
          setPos(top, left)
          oWebControl.JS_CreateWnd('playWnd', containerWidth, containerHeight) //JS_CreateWnd创建视频播放窗口，宽高可设定
            .then(function() {
              // setPos(top, left)
              init(appkey, appsecret, ip, param, isHide)
            })
        })
      }
    })
    return oWebControl
  }

  // 设置窗口控制回调
  // function setCallbacks() {
  //   oWebControl.JS_SetWindowControlCallback({
  //     cbIntegrationCallBack: cbIntegrationCallBack
  //   })
  // }

  //初始化
  function init(appkey, appsecret, ip, param, isHide) {

    getPubKey(function() {
      ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
      // var appkey = '21814325'                        //综合安防管理平台提供的appkey，必填
      var secret = setEncrypt(appsecret)                   //综合安防管理平台提供的secret，必填
      // var ip = '10.18.139.30'                        //综合安防管理平台IP地址，必填
      var playMode = 0                                  //初始播放模式：0-预览，1-回放
      var port = 443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
      var snapDir = 'D:\\SnapDir'                       //抓图存储路径
      var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
      var layout = '1x1'                                //playMode指定模式的布局
      var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
      var encryptedFields = 'secret'					          //加密字段，默认加密领域为secret
      var showToolbar = 0                               //是否显示工具栏，0-不显示，非0-显示
      var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
      var buttonIDs = ''  //自定义工具条按钮 0,16,256,257,258,259,260,512,513,514,515,516,517,768,769
      ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

      oWebControl.JS_RequestInterface({
        funcName: 'init',
        argument: JSON.stringify({
          appkey: appkey,                            //API网关提供的appkey
          secret: secret,                            //API网关提供的secret
          ip: ip,                                    //API网关IP地址
          playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
          port: port,                                //端口
          snapDir: snapDir,                          //抓图存储路径
          videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
          layout: layout,                            //布局
          enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
          encryptedFields: encryptedFields,          //加密字段
          showToolbar: showToolbar,                  //是否显示工具栏
          showSmart: showSmart,                      //是否显示智能信息
          buttonIDs: buttonIDs                       //自定义工具条按钮
        })
      }).then(function(oData) {
        oWebControl.JS_Resize(containerWidth, containerHeight)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        preview(param)
        if (isHide) {
          oWebControl.JS_HideWnd()
        }
      })
    })
  }

  //获取公钥
  function getPubKey(callback) {
    oWebControl.JS_RequestInterface({
      funcName: 'getRSAPubKey',
      argument: JSON.stringify({
        keyLength: 1024
      })
    }).then(function(oData) {
      console.log(oData)
      if (oData.responseMsg.data) {
        pubKey = oData.responseMsg.data
        callback()
      }
    })
  }

  function reSetPos(top, left) {
    setPos(top, left)
    oWebControl.JS_Resize(containerWidth, containerHeight)
  }

  // 设置偏移
  function setPos(top, left) {
    oWebControl.JS_SetDocOffset({
      left: left,
      top: top
    })  // 更新插件窗口位置
  }

  //RSA加密
  function setEncrypt(value) {
    var encrypt = new JSEncrypt()
    encrypt.setPublicKey(pubKey)
    return encrypt.encrypt(value)
  }

  // 注册事件
  function registerEvent() {
    $(window).on('resize', function() {
      containerHeight = container.height()
      containerWidth = container.width()
      oWebControl.JS_Resize(containerWidth, containerHeight)
    })
  }

  function preview(videoNum) {
    let cameraIndexCode = videoNum                         //获取输入的监控点编号值，必填
    let streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
    let transMode = 1                                      //传输协议：0-UDP，1-TCP
    let gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
    let wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
    cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
    cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
    oWebControl.JS_RequestInterface({
      funcName: 'startPreview',
      argument: JSON.stringify({
        cameraIndexCode: cameraIndexCode,                //监控点编号
        streamMode: streamMode,                         //主子码流标识
        transMode: transMode,                           //传输协议
        gpuMode: gpuMode,                               //是否开启GPU硬解
        wndId: wndId                                     //可指定播放窗口
      })
    })
  }
</script>
</html>
